<% if (!fileRouter) { ignoreFile() } %>import { <% if (addOnEnabled.start) { %>
  HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import { TanStackDevtools } from '@tanstack/react-devtools'
<% if (addOns.length) { %>
import Header from '../components/Header'
<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
<% } %>
<% if (addOnEnabled.start) { %>
import appCss from '../styles.css?url'
<% } %><% if (addOnEnabled["tanstack-query"]) { %>
import type { QueryClient } from '@tanstack/react-query'
<% if (addOnEnabled.tRPC) { %>
import type { TRPCRouter } from '@/integrations/trpc/router'
import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'
<% } %>

interface MyRouterContext {
  queryClient: QueryClient
  <% if (addOnEnabled.tRPC) { %>
  trpc: TRPCOptionsProxy<TRPCRouter>
  <% } %>
}<% } %>
  
export const Route = <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
<% if (addOnEnabled.start) { %>
    head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [
      {
        rel: 'stylesheet',
        href: appCss,
      },
    ],
  }),
<% } %>
<% if (addOnEnabled.start) { %>
  shellComponent: RootDocument
<% } else { %>
  component: () => (
    <>
  <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
  <% } %><% if (addOns.length) { %><Header />  
  <% } %><Outlet />
        <TanStackDevtools
        config={{
          position: 'bottom-right',
        }}
        plugins={[
          {
            name: 'Tanstack Router',
            render: <TanStackRouterDevtoolsPanel />,
          },
          <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
        ]}
      />
      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
      <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
    <% } %>
    </>)
<% } %>
})

<% if (addOnEnabled.start) { %>
function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
        <% } %><% if (addOns.length) { %><Header />  
        <% } %>{children}
          <TanStackDevtools
            config={{
              position: 'bottom-right',
            }}
            plugins={[
              {
                name: 'Tanstack Router',
                render: <TanStackRouterDevtoolsPanel />,
              },
              <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
            ]}
          />
          <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
          <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
        <% } %><Scripts />
      </body>
    </html>
  )
}
<% } %>
